<template>
  <div class="attachment-settings views-container">
    <div class="wlm-form">
      <div class="wlm-form-header">图片设置</div>
      <div class="wlm-form-content">
        <el-form
          ref="imgtype"
          :model="formFormatData.formData"
          :rules="formFormatData.rules"
          size="small"
          label-width="120px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="图片类型" prop="imgtype.imgtype">
            <div class="flex-col">
              <div class="flex-row flex-warp flex-align-c">
                <!-- <el-tag
                  v-for="(item, index) in formFormatData.formData.imgtype"
                  :key="index"
                  color="#fff"
                  style="margin-right:10px;margin-bottom:10px;"
                  closable
                  @close="deleteTag(index,'imgtype')"
                >
                  {{item}}
                </el-tag> -->
                <el-checkbox-group v-model="formFormatData.formData.imgtype">
                  <el-checkbox label="jpg"></el-checkbox>
                  <el-checkbox label="jpeg"></el-checkbox>
                  <el-checkbox label="png"></el-checkbox>
                  <el-checkbox label="gif"></el-checkbox>
                </el-checkbox-group>
              </div>
              <!-- <el-input v-model="addTagImg">
                <el-button
                  slot="append"
                  @click="addTagEvt(addTagImg,'imgtype')"
                >添加类型</el-button>
              </el-input> -->
            </div>
          </el-form-item>
          <el-form-item
            label="图片大小"
            prop="imgtype.imgsize"
          >
            <el-input v-model.trim.number="formFormatData.formData.imgsize">
              <template slot="append">kb</template>
            </el-input>
          </el-form-item>
          <el-form-item label="图片压缩">
            <el-radio-group v-model="formFormatData.formData.imgcompression">
              <el-radio label="0">关闭</el-radio>
              <el-radio label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
           <el-form-item
            v-if="formFormatData.formData.imgcompression === '1'"
            label="最大宽度"
            prop="imgtype.contraction"
          >
            <el-input v-model.trim.number="formFormatData.formData.contraction" placeholder="请输入缩略后图片 最大宽度">
              <template slot="append">px</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="wlm-form">
      <div class="wlm-form-header">视频设置</div>
      <div class="wlm-form-content">
        <el-form
          ref="videotype"
          :model="formFormatData.formData"
          :rules="formFormatData.rules"
          size="small"
          label-width="120px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="视频类型" prop="videotype.videotype">
            <div class="flex-col">
              <div class="flex-row flex-warp flex-align-c">
                <!-- <el-tag
                  v-for="(item, index) in formFormatData.formData.videotype"
                  :key="index"
                  color="#fff"
                  style="margin-right:10px;margin-bottom:10px;"
                  closable
                  @close="deleteTag(index,'videotype')"
                >
                  {{item}}
                </el-tag> -->
                <el-checkbox-group v-model="formFormatData.formData.videotype">
                  <el-checkbox label="mp4"></el-checkbox>
                </el-checkbox-group>
              </div>
              <!-- <el-input v-model="addTagVideo">
                <el-button
                  slot="append"
                  @click="addTagEvt(addTagVideo,'videotype')"
                >添加类型</el-button>
              </el-input> -->
            </div>
          </el-form-item>
          <el-form-item
            label="视频大小"
            prop="videotype.videosize"
          >
            <el-input v-model.trim.number="formFormatData.formData.videosize">
              <template slot="append">kb</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="wlm-form">
      <div class="wlm-form-header">音频设置</div>
      <div class="wlm-form-content">
        <el-form
          ref="audiotype"
          :model="formFormatData.formData"
          :rules="formFormatData.rules"
          size="small"
          label-width="120px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="音频类型" prop="audiotype.audiotype">
            <div class="flex-col">
              <div class="flex-row flex-warp flex-align-c">
                <!-- <el-tag
                  v-for="(item, index) in formFormatData.formData.audiotype"
                  :key="index"
                  color="#fff"
                  style="margin-right:10px;margin-bottom:10px;"
                  closable
                  @close="deleteTag(index,'audiotype')"
                >
                  {{item}}
                </el-tag> -->
                <el-checkbox-group v-model="formFormatData.formData.audiotype">
                  <el-checkbox label="mp3"></el-checkbox>
                </el-checkbox-group>
              </div>
              <!-- <el-input v-model="addTagAudio">
                <el-button
                  slot="append"
                  @click="addTagEvt(addTagAudio,'audiotype')"
                >添加类型</el-button>
              </el-input> -->
            </div>
          </el-form-item>
          <el-form-item
            label="音频大小"
            prop="audiotype.audiosize"
          >
            <el-input v-model.trim.number="formFormatData.formData.audiosize">
              <template slot="append">kb</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button
        size="small"
        type="primary"
        @click="formFormatSubmit"
      >保存</el-button>
    </div>
  </div>
</template>

<script>
import {
  setData,
  attachmentSetOld
} from '@/api/setting'
import { regPriceMinuss } from '@/utils/regular'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'UserSettings',
  components: {

  },
  directives: {

  },
  data() {
    var checkArray = (rule, value, callback) => {
      const type = rule.field.split('.')[1]
      const val = this.formFormatData.formData[type]
      if (!Array.isArray(val) || (Array.isArray(val) && val.length === 0)) {
        return callback(new Error('请添加设置类型'))
      } else {
        callback()
      }
    }
    var checkKb = (rule, value, callback) => {
      const type = rule.field.split('.')[1]
      const val = this.formFormatData.formData[type]
      if (val === '') {
        return callback(new Error(`请设置${this.message[type]}数值`))
      } else if (!regPriceMinuss(val)) {
        return callback(new Error(`${type !== 'contraction' ? '设置附件上传值有误' : '最大宽度数值有误'}`))
      } else {
        callback()
      }
    }
    return {
      message: {
        audiosize: '音频',
        imgsize: '图片',
        videosize: '视频',
        contraction: '最大宽度'
      },
      addTagVideo: '',
      addTagImg: '',
      addTagAudio: '',
      formFormatData: {
        key: ['imgtype', 'videotype', 'audiotype'],
        api: {
          editForm: {
            api: setData,
            params: {
              key: 'attachmentSet',
              always: true
            }
          },
          submitForm: attachmentSetOld
        },
        formData: {
          key: 'attachmentSet',
          imgtype: [],
          imgsize: '',
          contraction: '',
          imgcompression: '0',
          videotype: [],
          videosize: '',
          audiotype: [],
          audiosize: ''
        },
        rules: {
          imgtype: {
            imgtype: [{
              required: true,
              validator: checkArray,
              trigger: 'blur'
            }],
            imgsize: [{
              required: true,
              validator: checkKb,
              trigger: 'blur'
            }],
            contraction: [{
              required: true,
              validator: checkKb,
              trigger: 'blur'
            }]
          },
          videotype: {
            videotype: [{
              required: true,
              validator: checkArray,
              trigger: 'blur'
            }],
            videosize: [{
              required: true,
              validator: checkKb,
              trigger: 'blur'
            }]
          },
          audiotype: {
            audiotype: [{
              required: true,
              validator: checkArray,
              trigger: 'blur'
            }],
            audiosize: [{
              required: true,
              validator: checkKb,
              trigger: 'blur'
            }]
          }
        }
      }
    }
  },
  methods: {

  }
}
</script>
